<template>
    <div>
        <Row style="margin:5px 0px 10px 5px">
            <i-col span="2" >
                <Button  size="default"  type="primary" @click="btn_refresh">刷新</Button>
            </i-col>
            <i-col  span="3" >
                <Button  size="default"  @click="btn_add_site" v-has="'add_site'">新增站点</Button>
            </i-col>
            <i-col span="6">
                <i-input size="default" v-model="selectContent"  search   placeholder="输入查询内容" @on-change="btn_select_site" >
                    <Button  size="default"  slot="append"  icon="md-search" @click="btn_select_site"></Button>
                </i-input>
            </i-col>
        </Row>
        <!-- 列表区域 -->
        <i-table size="default"   border stripe  :columns="format" :data="show_list" :height="sharedState.tableHeight" >
            <template slot-scope="{ row, index }" slot="action">
                <Dropdown trigger="click">
                    <a href="javascript:void(0)">
                        <Icon type="ios-create-outline" size="30" />
                    </a>
                    <DropdownMenu slot="list">
                        <DropdownItem><Button  size="default"  type="primary"  @click="btn_edit_site(index)" v-has="'edit_site'">编辑</Button></DropdownItem>
                        <DropdownItem><Button  size="default"  type="error"   @click="del_site(index)" v-has="'delete_site'">删除</Button></DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </template>
        </i-table >
        <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" show-total/>
        </div>
        <AddSiteModal  :isShow="show_add_site_modal"  @closeModal="closeAddSiteModal"  :site="site"           @addSuccess="onAddSiteSuccess"></AddSiteModal>
        <EditSiteModal :isShow="show_edit_site_modal" @closeModal="closeEditSiteModal" :site_edit="site_edit" @editSuccess="onEditSiteSuccess"></EditSiteModal>

    </div>
</template>

<script>
import axios from 'axios';
import { post } from  '@/api/http'
import { show_simple_page } from '@/common/util'
import {
    site_list,
    site_delete,
    // site_update,
    // get_env_name_list,
    site_select,
} from '@/api';
import store from '@/store'
import AddSiteModal from './lib/add'
import EditSiteModal from './lib/edit'
export default {
    components: {
        AddSiteModal,
        EditSiteModal,
    },
    data() {
        return {
            sharedState: store.state,
            format: [
                {
                    title: '名字',key: 'name',
                    render: (h,params) => {
                        return h('div',[
                            h('a',{
                                style: {color: 'blue'},
                                on: {
                                    click: ()=>{                  
                                        this.handleLink(params);
                                    }
                                }
                            },params.row.name)
                        ])
                    }
                },
                {
                    title: '环境',key: 'env'
                },
                {
                    title: '链接',key: 'link'
                },
                {
                    title: '账号',key: 'account'
                },
                {
                    title: '密码',key: 'password'
                },
                {
                    title: '描述',key: 'description',tooltip: true,ellipsis: true,
                },
                {
                    title: '创建时间',key: 'create_time'
                },
                {
                    slot: 'action',width: 150,align: 'center'
                }
            ],
            // 新增站点绑定
            site: {
                name: '',
                link: '',
                account: '',
                password: '',
                description: '账号1: \n密码1：',
                env: 'dev',
            },
            show_add_site_modal: false,

            // 编辑数据
            site_edit: {
                name: '',
                link: '',
                account: '',
                password: '',
                description: '',
                env: '',
            },
            show_edit_site_modal:false,
            // 查询数据
            selectContent: '',
            // 编辑数据
            show_list: [],
            // 分页
            total: 0,
            pageSize: 15,
        }
    },
    methods: {
        onEditSiteSuccess(){
            console.log("执行父附件的Edit成功函数")
            this.refresh()
        },
        closeEditSiteModal(){
            console.log("执行父组件的关闭modal函数")
            // 会触发子组件的watch isShow函数 执行实际的关闭动作
            this.show_edit_site_modal = false
        },
        onAddSiteSuccess(){
            console.log("执行父附件的Add成功函数")
            this.refresh()
        },
        closeAddSiteModal(){
            console.log("执行父组件的关闭modal函数")
            // 会触发子组件的watch isShow函数 执行实际的关闭动作
            this.show_add_site_modal = false
        },
        btn_refresh(){
            this.refresh()
        },
        btn_select_site(){
            let selectContent = this.selectContent
            if(selectContent =='' || selectContent==null) {
                // 等同于全表查询
                this.refresh()
                return
            }
            let data = JSON.stringify({"selectContent":selectContent})

            post(site_select,data).then( (response) => {
                show_simple_page(this,response)
            })

        },
        handleLink(params){
            window.open(params.row.link,"_blank");
        },
        btn_edit_site(index){
            let site =  JSON.parse(JSON.stringify(this.show_list[index]))
            console.log(site)
            this.site_edit = site
            this.show_edit_site_modal=true
        },
        btn_add_site(){

            this.show_add_site_modal = true
        },
        changePage(index) {
            let _start = (index -1) * this.pageSize
            let _end = index * this.pageSize
            this.show_list = this.total_list.slice(_start,_end)
        },
        del_site(index){
            let id = this.show_list[index].id
            let name = this.show_list[index].name
            let result = confirm("确定要删除"+name+"吗?")
            if(result == false) return 

            let data = {"id":id}
            axios({
                url:site_delete,method:'post',data:data,
            }).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('删除'+name+'成功')
                    this.refresh()
                }else {
                    alert("删除失败:",info)
                }
            })

        },
        refresh() {
            post(site_list).then( (response) => {
                show_simple_page(this,response)
            })
        }
    },
    mounted: function() {
        this.show_add_site_modal = false
        this.show_edit_site_modal = false 
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
<style scoped>

</style>